<template>
  <div>
    {{ activeComponent }}
    <label> <input type="radio" v-model="activeComponent" :value="HelloWorld1" /> A </label>
    <label> <input type="radio" v-model="activeComponent" :value="HelloWorld" /> B </label>
    <Transition name="fade" mode="out-in">
      <component :is="activeComponent"></component>
    </Transition>
    <!-- <HelloWorld1></HelloWorld1>
    <HelloWorld></HelloWorld> -->
  </div>
</template>

<script setup lang="ts">
  import { shallowRef } from 'vue'
  import HelloWorld from './HelloWorld.vue'
  import HelloWorld1 from './HelloWorld1.vue'
  const activeComponent = shallowRef(HelloWorld1)
</script>

<style lang="scss">
  .fade-enter-active,
  .fade-leave-active {
    transition: opacity 0.5s ease;
  }

  .fade-enter-from,
  .fade-leave-to {
    opacity: 0;
  }
</style>
